<template>
  <div class='container-subjects'>
    <el-card>
      <!-- 筛选 -->
      <el-row>
        <el-col :span="18">
          <el-form
            label-width='80px'
            inline
          >
            <el-form-item label='学科名称'>
              <el-input v-model="reqParams.subjectName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                @click="clear()"
              >清除</el-button>
              <el-button
                type="primary"
                size="small"
                @click="search()"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 按钮 -->
        <el-button
          style="float:right"
          icon="el-icon-edit"
          type="success"
          size="small"
          @click="showDialog = true"
        >新增学科</el-button>
      </el-row>

      <el-row>
        <!-- 总计 -->
        <el-alert
          :closable='false'
          :title="`数据一共${total}条`"
          type="info"
          show-icon
        >
        </el-alert>
      </el-row>
      <!-- 表格 -->
      <el-table :data="subjects">
        <el-table-column
          label="序号"
          type='index'
        ></el-table-column>
        <el-table-column
          label="学科名称"
          prop='subjectName'
        ></el-table-column>
        <el-table-column
          label="创建者"
          prop='username'
        ></el-table-column>
        <el-table-column
          label="创建日期"
          width="150px"
        >
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template slot-scope="scope">
            {{scope.row.isFrontDisplay === 1 ? '是' : '否'}}
          </template>
        </el-table-column>
        <el-table-column
          label="二级目录"
          prop="twoLevelDirectory"
        ></el-table-column>
        <el-table-column
          label="标签"
          prop="tags"
        ></el-table-column>
        <el-table-column
          label="题目数量"
          prop="totals"
        ></el-table-column>
        <el-table-column
          label="操作"
          width="240px"
        >
          <template slot-scope="scope">
            <el-link
              @click="toDirectorys(scope.row)"
              :underline='false'
              type="primary"
            >学科分类</el-link>
            <el-link
              @click="toTags(scope.row)"
              :underline='false'
              type="primary"
            >学科标签</el-link>
            <el-link
              @click="editSubject(scope.row.id)"
              :underline='false'
              type="primary"
            >修改</el-link>
            <el-link
              @click="delSubject(scope.row.id)"
              :underline='false'
              type="primary"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- page-size：每页支持页数
           total：总条目数
           current-page：当前页数
           page-sizes：每页显示个数选择
       -->
      <el-pagination
        class="page"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        :page-size="reqParams.pagesize"
        :current-page="reqParams.page"
        @current-change='changePage'
        @size-change='changePageSize'
        :page-sizes='[5,10,20]'
      >
      </el-pagination>
    </el-card>

    <!-- 弹框 -->
    <el-dialog
      :title="showText"
      :visible="showDialog"
      width="400px"
      @close="btnCancel"
    >
      <el-form
        ref="subList"
        label-width="80px"
        :rules="rule"
        :model="subList"
      >
        <el-form-item
          label="学科名称"
          prop="subjectName"
        >
          <el-input
            size="small"
            v-model="subList.subjectName"
          />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <el-row
        type='flex'
        justify="end"
        align="bottom"
      >
        <el-col :span="11">
          <el-button @click="btnCancel">取 消</el-button>
          <el-button
            type="primary"
            @click="btnOK"
          >确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { list, update, detail, add, remove } from '@/api/hmmm/subjects.js'
export default {
  name: 'subjects-page',
  data () {
    return {
      reqParams: {
        //学科关键字
        subjectName: null,
        //页码
        page: 1,
        //尺寸
        pagesize: 10,
      },
      subjects: [],//学科列表数据
      total: 0,//总条数
      showDialog: false,//弹出弹框
      okId: null,//定义节点id
      isFrontDisplayId: null,//是否前台显示
      subList: {
        subjectName: ''
      },
      value: true,
      rule: {
        subjectName: {
          required: true, message: "学科名称不能为空", trigger: "blur"
        }
      }
    }
  },
  created () {
    this.getSubjects()
  },
  methods: {
    //删除学科
    delSubject (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        this.getSubjects()
      })
    },
    //获取学科列表
    async getSubjects () {
      const { data } = await list(this.reqParams)
      this.subjects = data.items
      this.total = data.counts
    },
    //分页
    changePage (newPage) {
      this.reqParams.page = newPage
      this.getSubjects()
    },
    //更改页面显示个数
    changePageSize (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getSubjects()
    },
    //搜索
    search () {
      this.reqParams.page = 1
      this.getSubjects()
    },
    //清除
    clear () {
      this.reqParams = {
        //学科关键字
        subjectName: null,
        //页码
        page: 1,
        //尺寸
        pagesize: 10,
      }
    },
    //跳转目录
    toDirectorys (row) {
      //解构出 id 和 name 这是规定的，后面取出就按这两个参数取出数据
      const { id, subjectName: name } = row
      this.$router.push({ path: 'directorys', query: { id, name } })
    },
    //跳转标签
    toTags (row) {
      const { id, subjectName: name } = row
      this.$router.push({ path: 'tags', query: { id, name } })
    },
    //修改
    async editSubject (id) {
      this.okId = id
      this.showDialog = true
      const res = await detail({ id })
      this.subList.subjectName = res.data.subjectName
      this.value = res.data.isFrontDisplay === 1 ? true : false
    },
    //确认按钮
    async btnOK () {
      try {
        await this.$refs.subList.validate()
        if (this.okId) {
          //有id就是修改业务
          await update({ id: this.okId, subjectName: this.subList.subjectName, isFrontDisplay: this.value })
          this.$message.success('修改成功')
        } else {
          //无id就是新增业务
          await add({ subjectName: this.subList.subjectName, isFrontDisplay: this.value })
          this.$message.success('新增成功')
        }
        this.getSubjects()
        this.showDialog = false
      } catch (error) {
        console.log(error)
      }
    },
    btnCancel () {
      this.okId = null
      this.subList = {
        subjectName: ''
      }
      //移除校验
      this.$refs.subList.resetFields()
      this.showDialog = false
    }
  },
  computed: {
    showText () {
      return this.okId ? '修改学科' : '新增学科'
    }
  }
}
</script>

<style scoped lang="scss">
.container-subjects {
  padding: 10px 15px;
  .page {
    float: right;
    margin: 15px 0;
  }
  .el-link {
    margin-right: 10px;
  }
}
</style>
